<template>
  <!--添加图书-->
  <el-dialog
      title="添加图书"
      :visible.sync="addDishDialogVisual"
      width="30%" @close="handlerAddDishDialogClose">
    <el-form
        :model="addDishForm"
        :rules="addDishRules"
        ref="addDishFormRef"
        label-width="100px"
        class="demo-ruleForm">
      <el-form-item label="图书名" prop="title">
        <el-input v-model="addDishForm.title"></el-input>
      </el-form-item>
      <el-form-item label="图书介绍" prop="description">
        <el-input type="textarea" v-model="addDishForm.description"></el-input>
      </el-form-item>
      <el-form-item label="图书价格" prop="price">
        <el-input v-model.number="addDishForm.price"></el-input>
      </el-form-item>
      <el-form-item label="图书分类" prop="dishCategory.cid">
        <el-select
            v-model="addDishForm.dishCategory.cid"
            placeholder="请选择图书分类" class="chooseCategory">
          <el-option
              v-for="category in categoryList"
              :label="category.categoryName"
              :value="category.cid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
            :action="fileUploadUrl"
            list-type="picture-card"
            :auto-upload="true"
            ref="uploadAddDishImg"
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview"
            :on-success="uploadFileSuccess"
            :on-change="handleChange"
            :class="{hideUpload:hideUploadBtn}"
            name="uploadFile">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                <el-button @click="addDishDialogVisual=false">取 消</el-button>
                <el-button type="primary" @click="addDish">确 定</el-button>
            </span>
    <!--查看图片-->
  </el-dialog>
</template>

<script>
export default {
  name: "AddDish",
  data(){
      return{
        //添加图书表单
        addDishForm:{
          title:'',
          description:'',
          dishCategory:{
            cid:'',
            categoryName:''
          },
          price:'',
          imgUrl:''
        },
        addDishRules:{
          title:[{ required: true, message: '请输入图书名', trigger: 'blur' }],
          description:[{ required: true, message: '请输入图书简介', trigger: 'blur' }],
          price:[{ required: true, message: '图书单价不能为空',trigger:'blur'},
            { type: 'number', message: '图书单价必须为数字值',trigger: 'blur'}],
          'dishCategory.cid':[{ required: true, message: '请选择图书分类', trigger: 'blur' }]

        },
        categoryList:[],
        fileUploadUrl:"http://10.181.218.234:8122/orderSystem/common/uploadFile",
        //隐藏上传按钮
        hideUploadBtn:false,
        //预览图片
        showUploadImgDialog:false,
        //添加窗口显示
        addDishDialogVisual:false
      }
  },
  methods:{
    //添加图书对话框关闭时调用
    handlerAddDishDialogClose(){
      this.$refs.addDishFormRef.resetFields()
      this.hideUploadBtn=false
      this.$refs.uploadAddDishImg.clearFiles()
    },
    //图片删除时
    handleRemove(file, fileList) {
      this.hideUploadBtn=fileList.length>=1
    },
    //查看图片
    handlePictureCardPreview(file) {
      this.$bus.$emit("addDishPicturePreview",file.url,true);
    },
    //文件上传成功
    async uploadFileSuccess(resp){
      console.log(resp.data)
      this.addDishForm.imgUrl=resp.data;
    },
    //文件改变时
    handleChange(file,fileList){
      this.hideUploadBtn=fileList.length>=1
    },
    //添加图书
    addDish(){
      this.$refs.addDishFormRef.validate(async valid=>{
        if (!valid)return
       const{data:res}=await this.$http.post("/dish/addDish",this.addDishForm)
         if (res.status!==200)return this.$message.error("添加图书失败");
         //关闭窗口
         this.addDishDialogVisual=false;
          //更新视图
          this.$bus.$emit("updatingDishView")

      });
    },
    //查询所有分类信息
    async getCategoryList(){
      const {data:res}=await this.$http.get("/category/findCategorys")
      if (res.status!=200)return this.$message.error("查询分类信息失败")
      this.categoryList=res.data
    },
    //控制添加窗体的显示与隐藏
    changeAddDishDialog(status){
        this.addDishDialogVisual=status;
    }
  },
  mounted() {
    //绑定添加窗体的显示与隐藏事件
    this.$bus.$on("changeAddDishDialog",this.changeAddDishDialog)
    //获取分类信息
    this.getCategoryList();
  }
}
</script>

<style scoped>

</style>
